<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/StoresSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >门店列表</el-breadcrumb-item>
      <!-- <el-breadcrumb-item :to="{ path: '/StoresSystem/ShopsList' }">新增门店</el-breadcrumb-item> -->
    </el-breadcrumb>

    <el-tabs type="border-card">
      

      <el-tab-pane label="正在营业门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 正在营业门店
        </span>

        <el-table
          height="380px"
          size="middle"
          :data="shopsData1
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="170%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button size="small" @click="updateShops(scope.row)">修改门店</el-button>
              <el-button size="small" @click="checkShops(scope.row)">查看门店</el-button>

              <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="updateData">
                  <el-form-item label="门店名称：">
                    <el-input v-model="updateData.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="门店地址：">
                    <el-input v-model="updateData.address" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="close">取 消</el-button>
                  <el-button type="primary" @click="sure(updateData._id)">确 定</el-button>
                </div>
              </el-dialog>

              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="closeShop(scope.row)"
                :plain="true"
              >关闭门店</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pageData1.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData1.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData1.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增待审核门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 新增待审核门店
        </span>

        <el-table
          height="380px"
          size="middle"
          :data="shopsData2
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="170%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
            

              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="cancelAddShop(scope.row)"
                :plain="true"
              >取消审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="pageData2.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData2.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData2.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="关闭待审核门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 关闭待审核门店
        </span>

        <el-table
          height="380px"
          size="middle"
          :data="shopsData3
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="170%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
            

              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="cancelCloseShop(scope.row)"
                :plain="true"
              >取消审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            :current-page="pageData3.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData3.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已关闭门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 已关闭门店
        </span>

        <el-table
          height="380px"
          size="middle"
          :data="shopsData4
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="170%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="againOpen(scope.row)"
                :plain="true"
              >解封门店</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            :current-page="pageData4.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData4.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData4.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 新增门店
        </span>

        <el-form :model="addShopsData" ref="addShopsData" label-width="150px" class="demo-addShopsData">
          <el-form-item label="门店名称：" prop="name">
            <el-input type="text" v-model="addShopsData.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="门店地址：" prop="address">
            <el-input v-model.number="addShopsData.address" type="text"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addShops(addShopsData)">申请门店</el-button>
            <el-button @click="resetForm('addShopsData')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("shops");

export default {
  data() {
    
    return {
     addShopsData: {
        name: "",
        address: "",
        state:"待审核",
        storesId:""
      },



      search: {
        searchType: "name",
        searchValue: ""
      },
      btnState: true
    };
  },
  computed: {
    ...mapState([
      "shopsData1",
      "shopsData2",
      "shopsData3",
      "shopsData4",
      "pageData1",
      "pageData2",
      "pageData3",
      "pageData4",
      "dialogFormVisible",
      "updateData"
    ])
  },
  created() {
    this.getShopsData1Async();
    this.getShopsData2Async();
    this.getShopsData3Async();
    this.getShopsData4Async();
    this.getStoresData()
  },
  methods: {
    async getStoresData(){
      const {data} =await axios.get('/stores/getStores',{params:{name:"123"}})
      this.addShopsData.storesId=data[0]._id
      console.log(this.addShopsData)

    },


    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapMutations(["close", "updateShops"]),
    ...mapActions([
      "getShopsData1Async",
      "getShopsData2Async",
      "getShopsData3Async",
      "getShopsData4Async",
      "handleSizeChange1",
      "handleCurrentChange1",
      "handleSizeChange2",
      "handleCurrentChange2",
      "handleSizeChange3",
      "handleCurrentChange3",
      "handleSizeChange4",
      "handleCurrentChange4",
      "sure",
      "addShops",
      "closeShop",
      "cancelCloseShop",
      "cancelAddShop",
      "againOpen",
    ]),
    checkShops(row) {
      console.log(row);
      if (row.state == "正常") {
        this.$router.push("/StoresSystem/GoodsList");
      } else {
        this.$router.push("/StoresSystem/AwaitCheck");
      }
    }
  }
};
</script>

<style>
/* *{
  box-sizing: border-box !important;
} */

.addBtn {
  height: auto !important;
}
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
.el-tabs__nav-scroll {
  line-height: 45px;
}
.el-tabs__nav-scroll div {
  height: 100%;
}
.el-form.demo-addShopsData{
  width: 50%;
  height: 380px;
}
.el-form.demo-addShopsData .el-form-item:first-child{
  margin-top: 50px;
}






.el-table__header-wrapper .has-gutter tr th {
  line-height: 60px;
}
.has-gutter .cell {
  text-align: center;
  font-size: 14px;
}
.el-table__row .cell {
  text-align: center;
}
.is-right button {
  margin-right: 5px;
}
.el-dialog {
  width: 500px;
}
.el-form-item {
  padding: 0 40px;
}
.el-dialog__header {
  display: flex;
}
.el-dialog .el-input {
  width: 260px;
}
.el-dialog__close {
  display: none;
}
.dialog-footer {
  padding-right: 40px;
}

.el-pagination {
  margin-top: 10px;
  height: 30px !important;
}
.studentsImage {
  width: 50px;
}
</style>